<template>
  <div>
    <h1>Cinema组件</h1>
    <select v-model="eTicketFlag">
      <option :value="0">第一种</option>
      <option :value="1">第二种</option>
    </select>
    <h4 v-for="cinema in cinemaList" :key="cinema.cinemaId">{{ cinema.name }}</h4>
  </div>
</template>
  
<script setup>
import { computed, onMounted, ref } from "vue";
import { useStore } from "vuex";

const store = useStore();
const eTicketFlag = ref(0);

const cinemaList = computed(()=>{
  // 要注意，其实我们store.getters.filterCinemaList就已经可以拿到getters里的方法return的东西了，所以这里加一对括号就可以调用return的那个函数
  return store.getters.filterCinemaList(eTicketFlag.value);
});

onMounted(()=>{
  if(store.state.cinemaList.length==0) store.dispatch('getCinemaList');
})

</script>